<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>flex VS float</title>
    <style>
      .main {
        width: 100%;
        height: 1000px;
        background: #f5f5f5;
        display: flex;
        flex-wrap: wrap;
      }

      .main li {
        list-style: none;
        width: 50px;
        height: 50px;
        background: red;
        margin: 5px;
        /* float: left; */
      }
    </style>
  </head>
  <body>
    <h1>大量元素排列</h1>
    <ul id="main" class="main"></ul>
  </body>
  <script>
    window.addEventListener('load', () => {
      let mainEle = document.getElementById('main');
      for(let i = 0; i < 100000; i++) {
        let childEle = document.createElement('li');
        mainEle.appendChild(childEle);
      }
    })
  </script>
</html>